<template>
  <div>
    <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%">
      <el-table-column
              align="center"
              prop="time"
              label="日期"
              width="180">
      </el-table-column>
      <el-table-column
              align="center"
              prop="auto"
              label="姓名"
              width="180">
      </el-table-column>
      <el-table-column
              align="center"
              prop="name"
              label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total">
    </el-pagination>
  </div>
</template>
<style lang="less" rel="stylesheet/less">
</style>
<script>
  export default{
    components: {
    },
    data: function () {    // 组件的数据格式
      return {
        tableData: [],
        loading: true,
        currentPage: 1
      }
    },
    events: {},
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
      getList: function () {
        let self = this
        this.$http.get('../../static/list.json').then(res => {
          console.log(res.data)
          this.tableData = res.data.data
          setTimeout(() => {
            self.loading = false
          }, 1000)
        })
      }
    },
    created: function () {
      this.getList()
    }
  }
</script>
